<template>
  <div class="container">
    <div class="container_form">
      <nav class="mask" ref="mask"></nav>
      <!-- 去登录 -->
      <div class="left left-login goLogin" v-show="maskState == 'right'">
        <my-button
          class="reg-left-button"
          :text="val3"
          @click.native="rightToleft"
          ref="toLoginButton"
        ></my-button>
      </div>
      <!-- 登录 -->
      <div class="left Login" v-show="maskState == 'left'">
        <H2 class="title">欢迎登录</H2>
        <el-input v-model="inputZH" placeholder="请输入账号"></el-input>
        <el-input
          v-model="inputMM"
          placeholder="请输入密码"
          show-password
          @keyup.enter.native="sendLoginReq"
        ></el-input>
        <my-button class="reg-right-button" :text="val2" @click.native="sendLoginReq"></my-button>
      </div>
      <!-- 去注册 -->
      <div class="right goReg" v-show="maskState == 'left'">
        <my-button
          class="reg-right-button"
          :text="val1"
          @click.native="leftToRight"
          ref="toRegisterButton"
        ></my-button>
      </div>
      <!-- 注册 -->
      <div class="right Reg" v-show="maskState == 'right'">
        <H2 class="title">注册</H2>
        <el-input v-model="inputZH" placeholder="请输入6-12位账号"></el-input>
        <div class="image-span">
          <el-input v-model="YZM" placeholder="图型验证码"></el-input>
          <div v-html="captcha" class="img" @click="updateCaptcha"></div>
        </div>
        <el-input
          v-model="inputMM"
          placeholder="请输入密码"
          show-password
        ></el-input>
        <el-input
          v-model="inputMM2"
          placeholder="确认密码"
          show-password
        ></el-input>
        <my-button
          class="reg-right-button"
          :text="val4"
          @click.native="sendRegisterReq"
        ></my-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RegisterAndLogin",
  data() {
    return {
      val1: "还没有账号，点击注册",
      val2: "登录",
      val3: "已有账号，点击登录",
      val4: "注册",
      inputZH: "",
      inputMM: "",
      inputMM2: "",
      YZM: "",
      maskState: "left",
      captcha: "",
    };
  },
  mounted() {
    this.$store.dispatch("registerAndLogin/reqCaptchaAction").then(() => {
      this.captcha = this.$store.state.registerAndLogin.captcha;
    });
  },
  methods: {
    leftToRight() {
      this.$refs.mask.classList.add("nav-click");
      this.maskState = "right";
    },
    rightToleft() {
      this.$refs.mask.classList.remove("nav-click");
      this.maskState = "left";
    },
    //注册验证
    sendRegisterReq() {
      let reg = /^[a-zA-z_]+[0-9a-zA-z_]{5,11}$/;
      if (this.inputZH === "") {
        this.$message({
          message: "账号不能为空",
          type: "warning",
        });
      } else if (!reg.test(this.inputZH)) {
        this.$message({
          message: "账号必须为6-12为大小写字母或数字下划线,且不能以数字开头",
          type: "warning",
        });
      } else if (this.inputMM === "") {
        this.$message({
          message: "密码不能为空",
          type: "warning",
        });
      } else if (this.inputMM.length < 6 || this.inputMM.length > 18) {
        this.$message({
          message: "密码长度需在6-18位之间",
          type: "warning",
        });
      } else if (this.inputMM !== this.inputMM2) {
        this.$message({
          message: "两次密码不一致",
          type: "warning",
        });
      } else {
        let message = {
          inputZH: this.inputZH,
          inputMM: this.inputMM,
          captcha: this.YZM,
        };
        //发送注册请求
        this.$store.dispatch("registerAndLogin/reqRegisterAction", message).then((result) => {
            console.log(result.data);
            let message = result.data;
            if (message.status == "201") {
              this.$message({
                message: "验证码不正确",
                type: "warning",
              });
            } else if (message.status == "202") {
              this.$message({
                message: "该用户已经存在，请登录",
                type: "warning",
              });
            } else if(message.status == "200"){
              this.$message({
                message: "注册成功3秒后回到首页",
                type: "success",
              });
              let time = setInterval(() => {
                this.$router.replace({
                  path: "/TenYearOf",
                  params:{ifLogin:true}
                });
                clearInterval(time);
              }, 3000);
            }else{
              this.$message({
                message: "500服务器错误",
                type: "error",
              });
            }
        });
      }
    },
    //登录验证
    sendLoginReq(){
      let message = {
        inputZH: this.inputZH,
        inputMM: this.inputMM,
      };
      this.$store.dispatch('registerAndLogin/reqLoginAction', message).then((result)=>{
        let message = result.data;
        if(message.status === '201'){
          this.$message({
            message:'该用户不存在',
            type:"warning",
          })
        }else if(message.status === '202'){
          this.$message({
            message:'密码错误',
            type:"warning",
          })
        }else if(message.status === '200'){
          this.$message({
            message: "登录成功3秒后回到首页",
            type: "success",
          });
          let time = setInterval(() => {
            this.$router.replace({
              path: "/TenYearOf",
              params:{ifLogin:true}
            });
            clearInterval(time);
          }, 3000);
        }else{
          this.$message({
            message: "500服务器错误",
            type: "error",
          });
        }
      });
    },
    //重新获取图片
    updateCaptcha() {
      this.$store.dispatch("registerAndLogin/reqCaptchaAction").then(() => {
        this.captcha = this.$store.state.registerAndLogin.captcha;
      });
    },
  },
};
</script>

<style lang="less" scoped>
@media screen and (min-width: 0px) {
  .container {
    background: url("./images/background-small.jpg");
    width: 100vw;
    height: 100vh;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .container_form {
      display: flex;
      flex-direction: column;
    }
    .title {
      font-family: "QNHGXK";
      font-size: 45px;
      text-align: center;
    }
    .Login {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
      & > .el-input {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;
      }
    }
    .goReg {
      & > button {
        width: 100%;
        font-size: 16px;
      }
    }
    .Login {
      & > button {
        font-size: 16px;
      }
    }
    .Reg {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      & > button {
        font-size: 16px;
      }
      & > .el-input {
        width: 100%;
      }
      div:nth-child(3) {
        display: flex;
        flex-direction: row;
        width: 100%;
        & > .el-input {
          width: 75%;
        }
      }
      & > * {
        margin-top: 10px;
        margin-bottom: 10px;
      }
    }
    .goLogin {
      order: 999;
      & > button {
        width: 100%;
        font-size: 16px;
      }
    }
  }
}
@media screen and (min-width: 686px) {
  .container {
    width: 100vw;
    height: 100vh;
    background: url(./images/background.jpg);
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    font-size: 20px;
    .title {
      font-family: "QNHGXK";
      font-size: 45px;
    }
    .container_form {
      width: 55vw;
      height: 60vh;
      background-color: rgba(114, 111, 111, 0.2);
      border-radius: 2em;
      box-shadow: -5px 5px 10px black;
      overflow: hidden;
      display: flex;
      position: relative;
      .left-login {
        .reg-left-button {
          width: 75%;
          font-size: 18px !important;
        }
      }
      & > div {
        width: 50%;
        height: 100%;
        flex: 1;
        display: flex;
      }
      nav {
        display: block;
        height: 100%;
        width: 50%;
        background-color: white;
        position: relative;
        transition: transform 0.5s ease-out;
      }
      .nav-click {
        transform: translate(27.5vw, 0);
      }
      .right {
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .reg-right-button {
          width: 75%;
          font-size: 18px !important;
          position: relative;
          z-index: 999;
        }
        & > .image-span {
          width: 75%;
          margin-top: 15px;
          margin-bottom: 15px;
          & > .el-input {
            width: 75%;
          }
          & > .img {
            width: 25%;
            margin-left: 0px;
            transform: translate(0, 2%);
            cursor: pointer;
          }
        }
        & > .el-input {
          width: 75%;
          margin-top: 15px;
          margin-bottom: 15px;
        }
      }
      .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0px;
        & > .el-input {
          width: 75%;
          margin-top: 25px;
          margin-bottom: 25px;
        }
      }
    }
  }
}
</style>